import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../../../routes/xin_he_routes.dart';
import '../../../../utils/xh_styles.dart';
import '../../../../utils/xin_he_image.dart';
import '../../../shopping_car/models/xin_he_goods_model.dart';
import 'xin_he_group_purchase_order_detail_logic.dart';

class XinHeGroupPurchaseOrderDetailPage extends StatelessWidget {
  XinHeGroupPurchaseOrderDetailPage({Key? key}) : super(key: key);

  final logic = Get.put(XinHeGroupPurchaseOrderDetailLogic());
  final state = Get.find<XinHeGroupPurchaseOrderDetailLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Obx(() => Scaffold(
      appBar: AppBar(
        leading: IconButton(
            onPressed: (){
              Get.back();
            },
            icon: Container(
              padding: const EdgeInsets.only(left: 7),
              alignment: Alignment.centerLeft,
              child: const XinHeAssetImage(
                'assets/images/home/app_back_3.png',
                width: 9.5,
                height: 17,
                fit: BoxFit.cover,),
            )
        ),
        backgroundColor: Colors.white,
        shadowColor: Colors.transparent,
        title: Text('拼团详情',style: TextStyle(color:XinHeColor('##222222'),fontSize: 17,fontWeight: FontWeight.w600)),
        centerTitle: true,
      ),
      body: Column(children: [
        Expanded(child: ListView(
          children: [
            ///订单状态
            Container(
              decoration: const BoxDecoration(color: Colors.white),
              margin: const EdgeInsets.only(top: 10,bottom: 10),
              padding: const EdgeInsets.symmetric(horizontal: 15),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SizedBox(height: 15,),
                  SizedBox(
                      height: 25,
                      child: Text('待支付',style: TextStyle(color: XinHeColor('#333333'),fontSize: 18,fontWeight: FontWeight.w500),)),
                  const SizedBox(height: 4,),

                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('请在',style: TextStyle(color: XinHeColor('#333333'), fontSize: 14, fontWeight: FontWeight.w500,)),
                      Text('${logic.snapUpHour.value}：${logic.snapUpMinute.value}：${logic.snapUpSecond.value}',style: TextStyle(color: XinHeColor('#E33F3F'), fontSize: 19, fontWeight: FontWeight.w500,)),
                      Text('内支付,超时将取消订单！',style: TextStyle(color: XinHeColor('#333333'), fontSize: 14, fontWeight: FontWeight.w500,)),

                    ],),

                  // SizedBox(height: 15,),
                  ///头像列表
                  Container(
                    height: 52,
                    width: Get.width,
                    margin: const EdgeInsets.only(top: 20),
                    alignment: Alignment.center,
                    decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(10)),
                    child: GridView.builder(
                      shrinkWrap: true,
                      padding: const EdgeInsets.symmetric(horizontal: 0),
                      scrollDirection: Axis.horizontal,
                      gridDelegate:  const SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 1,
                          mainAxisSpacing: 15,
                          childAspectRatio: 52/40
                      ),
                      itemBuilder: (ctx,index){
                        return GestureDetector(
                          onTap: (){
                          },
                          child: _avatarItemView(),
                        );
                      },
                      itemCount: 4,
                    ),
                  ),








                  Container(
                      margin: const EdgeInsets.symmetric(horizontal:16.5 ).copyWith(top: 20),
                      height: 45,
                      decoration: BoxDecoration(color: XinHeColor('#30E9E9'),borderRadius: BorderRadius.circular(22.5)),
                      alignment: Alignment.center,
                      child: Text('立即支付',style: TextStyle(color: XinHeColor('#FFFFFF'),fontSize: 18,fontWeight: FontWeight.w500),)),

                  SizedBox(height: 20,),

                ],),
            ),

            ///订单地址
            Container(
              height: 69-0.5,
              padding: const EdgeInsets.symmetric(horizontal: 15),
              color: Colors.white,
              width: Get.width-30,
              child: Row(children: [
                const XinHeAssetImage('assets/images/cart/pay_location.png',width: 15,height: 19,),
                const SizedBox(width: 5,),
                SizedBox(
                  width: Get.width-30 - 15-5-6-10,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      SizedBox(height: 5,),
                      Row(children: [
                        Text('张小姐',style: TextStyle(color: XinHeColor('#222222'),fontSize: 13,fontWeight: FontWeight.w600),),
                        Text('18888880000',style: TextStyle(color: XinHeColor('#666666'),fontSize: 12,fontWeight: FontWeight.w500),),

                      ],),
                      Text('广东省深圳市龙华大浪街道区宝龙大厦广东省深圳市龙华大浪街道区宝龙大厦区宝龙大厦广东省深圳市龙华大浪街道区宝龙区宝龙大厦广东省深圳市龙华大浪街道区宝龙区宝龙大厦广东省深圳市龙华大浪街道区宝龙',
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(color: XinHeColor('#777777'),fontSize: 12,fontWeight: FontWeight.w600),)
                    ],),
                ),
                SizedBox(width: 10,),
                const XinHeAssetImage('assets/images/cart/pay_arrow.png',width: 6,height: 10,),

              ],),
            ),


            ///商品信息
            Container(
              margin: const EdgeInsets.symmetric(horizontal: 15).copyWith(bottom: 10),
              padding: const EdgeInsets.symmetric(horizontal: 15),
              decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(7)),

              child: Column(
                children: [
                  SizedBox(
                    height: 44,
                    child: Row(children: [
                      const XinHeAssetImage('assets/images/cart/cart_unselected.png',width: 18,height: 18,),
                      SizedBox(width: 5,),
                      Text('欧若拉',style: TextStyle(color: XinHeColor('#282C2C'),fontSize: 13,fontWeight: FontWeight.w500),),
                      SizedBox(width: 3,),
                      const XinHeAssetImage('assets/images/cart/pay_arrow.png',width: 6,height: 10,),
                      Spacer(),


                    ],),
                  ),

                  _goodsItemView(XinHeGoodsModel(),0),
                  const SizedBox(height: 5,)


                ],),),

            ///总金额
            Container(
              margin: const EdgeInsets.symmetric(horizontal: 15),
              decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(10)),
              height: 71,
              child: Column(children: [

                totalAmountItemWidget('运费','0.00'),
                totalAmountItemWidget('实际付款','1500'),


              ],),
            ) ,

            ///订单编号
            Container(
              margin: const EdgeInsets.symmetric(horizontal: 15,vertical: 10),
              padding: const EdgeInsets.symmetric(horizontal: 15,vertical: 6),
              // height: 87,
              decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(10)),
              child: Column(
                children: [
                  Container(
                    height: 25,
                    alignment: Alignment.centerLeft,
                    child: Row(children: [
                      Text('订单编号',style: TextStyle(color: XinHeColor('#222222'),fontSize: 12,fontWeight: FontWeight.w500),),
                      Spacer(),
                      Text('837496475628496475',style: TextStyle(color: XinHeColor('#666666'),fontSize: 12,fontWeight: FontWeight.w500),),

                    ],),
                  ),

                  Container(
                    height: 25,
                    alignment: Alignment.centerLeft,
                    child: Row(children: [
                      Text('创建时间',style: TextStyle(color: XinHeColor('#222222'),fontSize: 12,fontWeight: FontWeight.w500),),
                      Spacer(),
                      Text('2021-4-25 15:00:00',style: TextStyle(color: XinHeColor('#666666'),fontSize: 12,fontWeight: FontWeight.w500),),

                    ],),
                  ),

                  Container(
                    height: 25,
                    alignment: Alignment.centerLeft,
                    child: Row(children: [
                      Text('支付时间',style: TextStyle(color: XinHeColor('#222222'),fontSize: 12,fontWeight: FontWeight.w500),),
                      Spacer(),
                      Text('2021-4-25 15:00:00',style: TextStyle(color: XinHeColor('#666666'),fontSize: 12,fontWeight: FontWeight.w500),),

                    ],),
                  )

                ],),),




          ],)
        ),



        SizedBox(height: Get.mediaQuery.padding.bottom,),
      ],),
    ));
  }



  Widget _goodsItemView(XinHeGoodsModel model,int index){
    return Stack(
      children: [
        Container(
          color: Colors.white,
          width: Get.width-30,
          height: 90,

          child:  Row(
            children: [

              const Padding(
                padding:  EdgeInsets.only(left: 0,top: 0,right: 15,bottom: 10),
                child: XinHeAssetImage('assets/images/home/tmp.png',width: 80,height: 80,fit: BoxFit.fill,),
              ),

              ///描述与价格数量
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SizedBox(
                      width:Get.width-30-80-30-15,
                      child: Text('一级冷榨有机野山茶籽油500ML级冷榨有机野iii',maxLines: 2,softWrap: true,style: TextStyle(color: XinHeColor('#222222'),fontSize: 14,fontWeight: FontWeight.bold),)
                  ),
                  const SizedBox(height: 10,),



                  SizedBox(
                    width:Get.width-30-80-30-15,
                    height: 23,
                    child: Row(
                      children: [

                        RichText(
                            text: TextSpan(children: [
                              ///￥
                              TextSpan(
                                text: '￥',
                                style: TextStyle(
                                  color: XinHeColor('#E84128'),
                                  fontSize: 9,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),

                              ///
                              TextSpan(
                                text: '${model.price}',
                                style: TextStyle(
                                  color: XinHeColor('#E84128'),
                                  fontSize: 16,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),

                            ]
                            )),
                        const Spacer(),

                        Text('x${model.count}',style: TextStyle(color: XinHeColor('#8B9191'), fontSize: 12, fontWeight: FontWeight.w500,)
                        ),
                        const SizedBox(width: 0,)

                      ],
                    ),
                  )

                ],)


            ],
          ),
        ),

        // Positioned(
        //   bottom: 0,
        //   right: 15,
        //   child: Container(
        //     width: Get.width-30-30,
        //     color: XinHeColor('#E7EEEE'),
        //     height: 0.5,),
        // )

      ],
    );
  }


  Widget  totalAmountItemWidget(String title,String titleValue){
    return Container(
      height: 35.5,
      alignment: Alignment.center,
      padding: const EdgeInsets.symmetric(horizontal: 15),
      child: Row(children: [
        Text(title,style: TextStyle(color: XinHeColor('#222222'),fontSize: 13),),
        Spacer(),
        Text(titleValue,style: TextStyle(color: XinHeColor('#222222'),fontSize: 15),),

      ],),
    );
  }

  Widget _avatarItemView(){

    return Stack(children: [
      Container(
        width: 40,
        height: 40,
        decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(20)),
        child:  XinHeAssetImage('assets/images/home/question_icon.png',width: 40,height: 40,),
      ),
      Positioned(
          top: 35,
          child: Container(
            height: 17,
            width: 40,
            alignment: Alignment.center,
            decoration: BoxDecoration(color: XinHeColor('#E33F3F'),borderRadius: BorderRadius.circular(8.5)),
            child: Text('团长',style: TextStyle(color: Colors.white,fontSize:11,fontWeight: FontWeight.w500 ),),
          ))
    ],);
  }

}
